<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style>
			.box{
				width: 320px;
				height: 320px;
				border: 1px red solid;
				font-size: 32px;
				text-align: center;
				/* 浮动 float:left(左),right(右) ，none(没有，默认值，不浮动)*/
				float: left;
			}
			.box2{
				width: 800px;
				height: 250px;
				border: 1px black  solid;
			}
			.clear{
				clear: both;
			}
			 .bigbox{
				/* overflow: hidden; */ /* 超出部分隐藏 */
			}
			/* 清除浮动的第三种方式:添加after伪元素，代表企业:网易，淘宝等 */
			.clearfix::after{  /* 在clearfix类的后面 */
				content: ""; /* 内容为空 */
				display: block; /* 将伪元素转换为块级盒子 */
				height: 0; /* 高度为0 */
				clear: both; /* 清除两端浮动 */
				visibility: hidden; /* 显示状态:隐藏 */
			}
		/* 	清楚浮动的第四种方式：添加双伪元素 */
		.clearfix::after,.clearfix::before{/* 在clearfix类前后添加 */
			content:"" ;
			display: table;
		}
		.clearfix::after{
			clear:both; /* 清除两端浮动 */
		}
		</style>
	</head>
	<body>
	<!-- 	传统的网页布局：标准流+浮动+定位 -->
	<!-- 浮动：float -->
	<!-- 快速创建标签： p*3>tab
	  快速创建类名为box的盒子：标签.box*个数>tab-->
	<!--  浮动的特性：
	  1.浮动的元素会脱离标准流（脱标）*****
	    解决方法：清除浮动。
		   方法：
		    1.额外标签法：隔墙法，即给浮动的盒子后添加一个额外的块级标签
			 并给标签加入clear：both;(清除两端浮动)。此方法不常用。
			2.给父级元素添加overflow:hidden 属性 
	  2. 浮动元素会在一行内显示并且顶部对齐
	  3.浮动的元素具有行内块元素类似的特性
	  -->
	<!--  网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
	  标准流+浮动布局策略：腹肌用标准流排列上下位置；内部元素用浮动排列左右位置！ -->
	  
	  <div class="bigbox" >
		  <div class="box">1</div>
	  <div class="box"  style="height:180px;" >2</div>
	  <div class="box" style="height:200px;" >3</div>
	  <!-- <div class="clear"></div> -->
	  <div class="clearfix"></div>
	  </div>
	  
	  <div class="box2"></div> 
	  
	</body>
</html>
